<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>K&eacute;vin Compain photographe</title>
        <meta name="Description" content="kevincompain.com : site Web de Kévin Compain, photographe diplômé de l'école de Saint Luc à Liège. Accédez aux différentes photographies proposées par Kévin et classées par thèmes."/>
        <meta name="keywords" content="kevin,compain,photographe,photographie,photographe,site,comblain-au-pont,liege"/>
        <meta name="robots" content="index, follow"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <link href="home.css" type="text/css" rel="stylesheet"/>

        <!-- jQuery and cycle plugin -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

        <!-- Google analytics -->
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-17116660-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>

        <!-- Custom functions -->
        <script type="text/javascript">
            var pictureList = new Array();
            var currentPictureIndex;

            /**
             * This method displays the picture passed in parameter
             *
             * @pic the picture to display
             */
            function displayPicture(pic) {
                document.getElementById('picture').innerHTML = '<img src="' + pic + '" alt="Photographie Kévin Compain"/>';
                return false;
            }

            /**
             * This method display a page into the required target
             *
             * @link the page to display
             * @kind method to use post or get
             * @target the target where display the page (_blank, div id...)
             */
            function displayPage(link, kind, target) {

                $.ajax({
                    url: link,
                    type : kind,
                    success: function(data) {
                        $(target).html(data);
                    }
                });
            }

            /**
             * This method is responsible to change the current picture on keypress (key left or key right)
             *
             * @e the keyPress event
             */
            function changeCurrentPicture(e) {
                var code = e.keyCode? e.keyCode : e.charCode;

                if(code == 37 && currentPictureIndex-1 >= 0) {
                    currentPictureIndex = currentPictureIndex - 1;
                    document.getElementById('picture').innerHTML = '<img src="'+pictureList[currentPictureIndex]+'"/>';
                } else if(code == 39 && currentPictureIndex +1 < pictureList.length) {
                    currentPictureIndex = currentPictureIndex + 1;
                    document.getElementById('picture').innerHTML = '<img src="'+pictureList[currentPictureIndex]+'"/>';
                }
            }
        </script>
    </head>

    <body onKeyDown="changeCurrentPicture(event);">
        <?php
        $pictureFolderName = 'photos';
        $sliderFolderName = 'slider';
        $menu = array();

        // --- Get first level directories --- //
        $rootDirectory = opendir($pictureFolderName);
        while ($dir = readdir($rootDirectory)) {
            if ($dir != '.' && $dir != '..' && $dir != $sliderFolderName) {
                array_push($menu, $dir);
            }
        }

        // --- Get second level directories --- //
        if (isset($_GET['menu']) && !strpos($_GET['menu'], '.') && !strpos($_GET['menu'], '/')) {
            $subMenu = array();

            $menuDirectory = opendir($pictureFolderName . '/' . $_GET['menu']);
            while ($dir = readdir($menuDirectory)) {
                if ($dir != '.' && $dir != '..') {
                    array_push($subMenu, $dir);
                }
            }
        }

        // --- Get pictures --- //
        if (isset($_GET['menu']) && isset($_GET['subMenu']) && !strpos($_GET['menu'], '.') && !strpos($_GET['menu'], '/') && !strpos($_GET['subMenu'], '.') && !strpos($_GET['subMenu'], '/')) {
            $pictures = array();

            $subMenuDirectory = opendir($pictureFolderName . '/' . $_GET['menu'] . '/' . $_GET['subMenu']);
            while ($file = readdir($subMenuDirectory)) {
                if ($file != '.' && $file != '..') {
                    array_push($pictures, $file);
                }
            }
        }
        ?>
        <div id="siteTitle">
            <img src="design/kevincompain.png" alt="K&eacute;vin Compain" style="position:absolute; left:50px; top:20px;"/>
            <div id="spacer" style="height:20px;"></div>
        </div>
        <div id="infoFrame"><br/><a href="#" onClick="displayPage('mail.php','POST','#pictureContainer');">Contact</a> | Info&nbsp;&nbsp;&nbsp;</div>
        <div id="mainScreen">
            <img id="cornertl" src="design/cornertl.png" alt=""/>
            <table>
                <tr id="firstLine">
                    <td id="mainMenu">
                        <?php
                        global $menu;
                        if (isset($menu)) {
                            foreach ($menu as $menuItem) {
                                echo '<a href="?menu=' . $menuItem . '">' . $menuItem . '</a><br/>';
                            }
                        }
                        ?>
                    </td>
                    <!-- If home page is displayed, show slider -->
                    <td id="pictureContainer">
                        <div id="picture" <?php if (!isset($_GET['menu']) && !isset($_GET['subMenu']))
                            echo 'class="slideshow"'; ?>>
                                 <?php
                                 if (!isset($_GET['menu']) && !isset($_GET['subMenu'])) {
                                     $sliderDirectory = opendir($pictureFolderName . '/' . $sliderFolderName);
                                     while ($file = readdir($sliderDirectory)) {
                                         if ($file != '.' && $file != '..') {
                                             echo '<img src="' . $pictureFolderName . '/' . $sliderFolderName . '/' . $file . '" alt=""/>';
                                         }
                                     }
                                 }
                                 ?>
                        </div>
                    </td>
                    <td id="subMenu">
                        <?php
                                 global $subMenu;
                                 if (isset($subMenu)) {
                                     foreach ($subMenu as $subMenuItem) {
                                         echo '<a href="?menu=' . $_GET['menu'] . '&subMenu=' . $subMenuItem . '">' . $subMenuItem . '</a><br/>';
                                     }
                                 }
                        ?>
                             </td>
                         </tr>
                         <tr id ="secondLine">
                             <td></td>
                             <td id="pictureNavBar">
                        <?php
                                 global $pictureFolderName;
                                 global $pictures;
                                 if (isset($pictures)) {
                                     $index = 0;
                                     foreach ($pictures as $picture) {
                                         /* First picture is automatically displayed */
                                         if ($index == 0) {
                                             echo '<script type="text/javascript">
                                            displayPicture(\'' . $pictureFolderName . '/' . $_GET['menu'] . '/' . $_GET['subMenu'] . '/' . $picture . '\');
                                            currentPictureIndex = ' . $index . ';
					  </script>';
                                         }
                                         echo '<a href="design/negatif.png"
					onclick="displayPicture(\'' . $pictureFolderName . '/' . $_GET['menu'] . '/' . $_GET['subMenu'] . '/' . $picture . '\');"
					onmouseover="displayPicture(\'' . $pictureFolderName . '/' . $_GET['menu'] . '/' . $_GET['subMenu'] . '/' . $picture . '\');"> &nbsp;&nbsp;</a>
					<script type="text/javascript">
                                            pictureList.push(\'' . $pictureFolderName . '/' . $_GET['menu'] . '/' . $_GET['subMenu'] . '/' . $picture . '\');
					</script>';
                                         $index++;
                                     }
                                 }
                        ?>
                    </td>
                    <td></td>
                </tr>
            </table>
            <div style="text-align:right; width:100%"><img id="cornerbr" src="design/cornerbr.png" alt=""/></div>
        </div>
        <div id="pub">Site Web r&eacute;alis&eacute; par <a href="mailto:valery.stroeder@gmail.com">Val&eacute;ry Stroeder</a></div>


        <!--  initialize the slideshow when the DOM is ready -->
        <script type="text/javascript">
            $(document).ready(function() {
                $('.slideshow').cycle({
                    fx: 'fade'
                });
            });
        </script>
    </body>
</html>
